import React, { PureComponent } from 'react';
import { Switch, Route, Redirect, Link } from 'react-router-dom';
import { Menu, Layout, Icon, Breadcrumb, Dropdown } from 'antd';
import { observer } from 'mobx-react';

import SiderMenu from '../components/SiderMenu';
import GlobalHeader from '../components/GlobalHeader'
import styles from './basic.module.css';

/**
 * 基础Layout
 */
@observer(['app'])
export default class BasicLayout extends PureComponent {

  constructor(props) {
    super(props);

    this.state = { collapsed: false }
  }

  /**
   * 点击收缩展开菜单的处理
   */
  toggleMenu = () => {
    this.setState({
      collapsed: !this.state.collapsed
    });
  }

  /**
   * 点击退出登录的处理
   */
  handleLogout = () => {
    const { app, history } = this.props;
    app.logout();
    history.replace('/login');
  }

  render() {

    const { getRouteData, location, app } = this.props;
    const { collapsed } = this.state;

    // 取得BasicLayout相关的route数据
    const routeData = getRouteData('BasicLayout');

    return (
      <Layout style={{height: '100%'}}>
        <Layout.Sider trigger={null} collapsible collapsed={collapsed}>
          <SiderMenu collapsed={collapsed} routes={routeData} pathname={location.pathname} />
        </Layout.Sider>
        <Layout>
          <Layout.Header className={styles.header}>
            <GlobalHeader
              user={app.me} collapsed={collapsed}
              toggleMenu={this.toggleMenu} onLogout={this.handleLogout} />
          </Layout.Header>
          <Layout.Content>
            {this.renderBreadcrumb(routeData, location)}
            <div className={styles.content}>
              <Switch>
                {this.getRoutes(routeData)}
              </Switch>
            </div>
          </Layout.Content>
          <Layout.Footer>
              Footer Content
          </Layout.Footer>
        </Layout>
      </Layout>
    )
  }

  /**
   * 渲染面包屑导航
   * @param {*} routes 
   * @param {*} location 
   */
  renderBreadcrumb(routes, location) {

    const { pathname } = location;

    // 如果只有一层
    const lastSlashIndex = pathname.lastIndexOf('/');
    let breadcrumbs = [];

    if (lastSlashIndex == 0) {
      console.log(routes, pathname);
      const route = routes.filter(item => item.path === pathname)[0];
      breadcrumbs.push(
        <Breadcrumb>
          <Breadcrumb.Item>
            { route.icon ? <Icon type={route.icon} /> : <span /> }
            <span>{route.name}</span>
          </Breadcrumb.Item>
        </Breadcrumb>
      )
    }
    // 如果有两层
    else {
      const path1 = pathname.substring(0, lastSlashIndex);
      const path2 = pathname.substring(lastSlashIndex);
      
      for (let i in routes) {
        let route = routes[i];
        if (route.path == path1) {
          breadcrumbs.push(
            <Breadcrumb.Item>
              { route.icon ? <Icon type={route.icon} /> : <span /> }
              <span>{route.name}</span>
            </Breadcrumb.Item>
          );

          for (let j in route.children) {
            let childRoute = route.children[j];
            if (childRoute.path == path2) {
              breadcrumbs.push(
                <Breadcrumb.Item>
                  { childRoute.icon ? <Icon type={childRoute.icon} /> : <span /> }
                  <span>{childRoute.name}</span>
                </Breadcrumb.Item>
              );
              break;
            }
          }
          break;
        }
      }
    }

    return (
      <Breadcrumb className={styles.breadcrumb}>
        {breadcrumbs}
      </Breadcrumb>
    )
  }

  getRoutes(routeData) {

    let routes = [];
    for (let i in routeData) {

      const item = routeData[i];
      if (!item.children) {
        routes.push(<Route exact key={item.path} path={item.path} component={item.component} />);
      }
      else {
        routes = routes.concat(item.children.map(child => (
          <Route exact key={item.path + child.path} path={item.path + child.path} component={child.component} />
        )));
      }
    }

    return routes;
  }

}